<template>
	<view>
		<swiper circular indicator-dots class="swiper" autoplay="true" interval="2500">
			<!-- v-for循环遍历数组 -->
			<swiper-item v-for="(item, index) in banner" :key="index" v-if="(item.statusName !== '结束')">
				<image :src="getBanner(item.banner)" style="width: 100%;height: 150px;border-radius: 15px;">
				</image>
			</swiper-item>
		</swiper>
		<!-- 优惠券列表 -->
		<view class="list">
			<view class="coupons" v-for="(item, index) in banner" :key="index" v-if="(item.statusName !== '结束')">
				<view class="coupons-left">
					<image :src="getBanner(item.banner)" style="width: 100px;height: 75px;"></image>
					<view class="content">
						<view class="name">
							{{ item.activityName }}
						</view>
						<view class="time">
							<text class="time-item">活动时间：</text>
							<view>{{ item.startTime }}</view>
							<view>{{ item.endTime }}</view>
						</view>
					</view>
				</view>
				<view class="coupons-right">
					<!-- <button @click="handelReceive(item,index)" :class="[item.Receive?'y':'buttonClass']" -->
					<button @click="handelReceive(item, activityId)"
						:class="[item.Receive ? 'y' : 'buttonClass']">立刻领取</button>
				</view>
			</view>
		</view>


		<!-- 提示弹框 -->
		<view class="modalDlg-mask" v-if="(showModal)"></view>
		<view class="modalDlg" v-if="(showModal)">
			<view class="page-body">
				<view class="modalDlg-content">您尚未绑定手机号</view>
				<view class="modalDlg-content-item">是否绑定手机号？</view>
				    <view class="modalDlg-footer">
					   <button @click="closeModal" class="modalDlg-btn closeBtn">取消</button>
					   <button @click="confirmModal" form-type="submit" class="modalDlg-btn confirmBtn"
						open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import appconf from "@/common/appconf.js";
const domain = appconf.domain;
export default {
	data() {
		return {
			pageSize: 10,
			pages: 1,
			banner: [], // 优惠券
			bannerPhoto: [],
			domain: appconf.domain,
			activityId: "", // 活动id
			// Receive:false,
			disabaled: false,
			telephone: '',
			showModal: false,
			newDomain:''
		}
	},
	onLoad() {
		this.getActive()
	},
	methods: {
		// 获取活动信息
		getActive() {
			let data = {
				pageSize: this.pageSize,
				pageNo: this.pages
			}
			this.$request(this.$api.Coupons, data, "GET").then(res => {
				console.log("活动列表", res)
				if (res.code == 200) {
					this.banner = res.result.records.map(item => {
						return {
							banner: item.banner, // 活动海报图
							activityName: item.activityName, // 活动名称
							startTime: item.startTime, // 活动开始时间
							endTime: item.endTime, // 活动结束时间
							activityId: item.id, // 活动id
							statusName: item.statusName
						}
					})
				}
			})
			this.Receive = true
		},
		// 拼接图片路径
		getBanner(photo) {
			if(this.domain==='https://bingxiang.letmelife.com/'){
				this.newDomain ="https://yun.letmelife.com//"
			}else if(this.domain==='https://api.dev.letmelife.com/'){
				this.newDomain ="https://api.dev.letmelife.com//tcstore/"
			}
			return (this.newDomain + photo)
			console.log("图片路径",this.newDomain + photo)
		},
		// 点击领取
		// handelReceive(item,index) {		
		handelReceive(id) {
			console.log("手机号",getApp().globalData.phone)
			if (getApp().globalData.phone===null) {
				this.showModal = true
				return
			}
			this.activityId = id.activityId
			// 请求参数
			let data = {
				terminal: "wechat",
				userId: this.$store.state.userInfo.userId,
				phone: uni.getStorageSync("phone"),
				activityId: this.activityId
			}
			this.$request(this.$api.Receive, data, "GET").then(res => {
				if (res.code == 200) {
					console.log("点击领取，成功", res)
					uni.showToast({
						title: res.message,
						icon: "none",
						duration:2000
					})
				} else if (res.code == 500) {
					console.log("点击领取，失败", res)
					uni.showToast({
						title: res.message,
						icon: "none",
						duration:2000
					})
				}
			})
		},
		// 获取手机号
		getPhoneNumber(e){
			// #ifndef APP-PLUS
			uni.login({
				success: (res) => {
					let code = res.code;
					// #ifdef MP-ALIPAY
					// #endif
					// #ifdef MP-WEIXIN
					let data = {
						cloudId: e.detail.cloudId || '',
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
						code: code,
					}
					this.$request(this.$api.WechatGetPhone, data, "POST").then(res => {
						if(res.returnCode == 'SUCCESS'){
							uni.showToast({
								title: '获取成功',
								icon: 'none'
							});
							let phone = res.data.split(":")[1].replace(/"/g,'')
							this.telephone = phone;
							this.postLogin();
						}else{
							uni.showToast({
								title: '获取失败',
								icon: 'none'
							});
						}
					})
					// #endif
				},
			})
			// #endif
		},
		// 提交
		postLogin() {
			let that = this;
			let data = {
				userId: that.$store.state.userInfo.userId,
				phone: that.telephone,
				captcha: '1',
			}
			if (that.telephone == "") {
				uni.showToast({
					title: '未填写手机号码',
					icon: "none"
				});
				return false;
			}
			if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8,11}$/.test(that.telephone))) {
				uni.showToast({
					title: '手机号码格式不正确',
					icon: "none"
				});
				return false;
			}
			if (that.authCode == that.rightAuthCode) {
				that.$request(that.$api.TelephoneLogin, data).then(res => {
					if (res.returnCode == "SUCCESS") {
						that.$store.state.userInfo.phone = data.phone;
						uni.showModal({
							title: '绑定成功',
							content: '绑定成功',
							showCancel: false,
							success: res => {
								uni.navigateBack();
							},
						});
					} else {
						uni.showToast({
							title: res.returnMessage,
							icon: 'none'
						});
					}
					// 手机号码保存
					uni.setStorageSync("phone", this.telephone)
					console.log(uni.getStorageSync("phone")) 
					getApp().globalData.phone =uni.getStorageSync("phone")
				})
			} else {
				uni.showToast({
					title: '验证码有误',
					icon: "none"
				});
			}
		},
		confirmModal() {
			this.showModal = false
		},
		closeModal() {
			this.showModal = false
		}
	},
}
</script>

<style>
page {
	background-color: #f1f1f1;
}

.swiper {
	padding: 10px 10px 0;
}

.list {
	margin-top: 10px;
}

.coupons {
	background-color: #fff;
	padding: 4px 6px;
	border-radius: 5px;
	margin: 0 5px;
	display: flex;
	justify-content: space-between;
}

.coupons-left {
	display: flex;
	border-right: 1px dashed red;
	min-width: 0;
	flex: 1;
}

.content {
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.time-item {
	color: red;
}

.name {
	font-size: 18px;
	font-weight: normal;
}

.coupons-right {
	display: flex;
	align-items: center;
	width: 200rpx;
	justify-content: center;
}

.buttonClass {
	width: 90%;
	font-size: 14px;
	background-color: red;
	color: #fff;
}

.y {
	width: 90%;
	font-size: 14px;
	background-color: gray;
	color: #fff;
}





/* 弹框 */
.page-body {
	width: 320px;
	text-align: center;
	font-size: 18px
}

/* 遮罩层 */
.modalDlg-mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #000;
	z-index: 9000;
	opacity: 0.5;
}

/* 弹出层 */
.modalDlg {
	width: 70%;
	height: 30%;
	position: fixed;
	top: 25%;
	left: 0;
	right: 0;
	z-index: 9999;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.modalDlg-content {
	margin: 20px 0;
}

.modalDlg-content-item {
	font-size: 15px;
}

.modalDlg-title {
	font-size: 18px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0rpx;
}


.modalDlg-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10rpx 0;
}

.modalDlg-content .modalDlg-content-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modalDlg-content .modalDlg-content-item radio-group {
	width: 100%;
	color: #666;
}

.modalDlg-content .modalDlg-content-item .weui-check__label {
	display: flex;
	align-items: center;
}

.modalDlg-content .modalDlg-content-item .weui-cell__bd {
	line-height: 48rpx;
}

.modalDlg-content .modalDlg-content-item .weui-cell {
	padding: 20rpx;
	display: flex;
	flex-direction: row;
}

.modalDlg-footer {
	width: 100%;
	height: 100rpx;
	margin-top: 20px;
	/* 		border-top: 1rpx solid #ededed;
 */
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-between;
}

/* 弹出层里面的文字 */
.modalDlg .modalDlg-content text {
	text-align: justify;
	font-size: 28rpx;
	color: #666;
	/* margin-left:10px; */
}

/* 弹出层里面的按钮 */
.modalDlg-btn {
	width: 80px;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	font-size: 28rpx;
	border-radius: 40rpx;
	margin: 0 auto;
}

.modalDlg .modalDlg-footer .closeBtn {
	background: #fff;
	color: #fc4141;
	border: 1rpx solid #fc4141;
}

.modalDlg .modalDlg-footer .confirmBtn {
	background: #fc4141;
	color: #fff;
}
</style>
